<template>
  <div class="bottomList">
    <div class="mess">
      <el-badge
        :value="item.value"
        class="itemc"
        v-for="item in dataList"
        :key="item.id"
      >
        <el-button size="small">{{ item.name }}</el-button>
      </el-badge>
      <!-- <el-badge :value="12" class="itemc">
        <el-button size="small">昨日访问量</el-button>
      </el-badge> -->
      <!-- <el-badge :value="12" class="itemc" type="primary">
        <el-button :value="12" size="small">用户数量</el-button>
      </el-badge> -->
      <!-- <el-badge :value="12" class="itemc" type="warning">
        <el-button size="small">已登录</el-button>
      </el-badge> -->
    </div>
    <div class="idea" v-for="item in bottomData" :key="item.made">
      <div>{{ item.made }}</div>
      <div>{{ item.time }}</div>
      <div>{{ item.country }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { name: "总访问量", value: 15000, id: "1a" },
        { name: "昨日访问量", value: 5000, id: "2b" },
        { name: "登录用户", value: 3000, id: "3d" },
        { name: "注册用户", value: 4000, id: 1 },
      ],
      bottomData: [
        { made: "wuxingyan@163.com", time: "2021-09-10", country: "china" },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.bottomList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .mess {
  }
  .idea {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    > div {
      width: 150px;
      height: auto;
      color: #333;
    }
  }
}
.itemc {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
